<template>
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>VIN码查询记录 </h5>
                    </div>
                    <div class="ibox-content">

                        <table class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>VIN</th>
                                <th>IP</th>
                                <th>国家</th>
                                <th>省份</th>
                                <th>市(县)</th>
                                <th >时间</th>
                            </tr>
                            <tr>
                                <th></th>
                                <th><input v-on:keyup.13='getList()' style="width:96%" type="text" v-model="search.vin" /></th>
                                <th><input v-on:keyup.enter='getList()' style="width:96%" type="text" v-model="search.ip" /></th>
                                <th>
                                    <input v-on:keyup.13='getList()' style="width:96%" type="text" v-model="search.country" />

                                </th>
                                <th><input v-on:keyup.enter='getList()' style="width:96%" type="text" v-model="search.province" />
                                    </th>
                                <th><input v-on:keyup.13='getList()' style="width:96%" type="text" v-model="search.city" />
                                    </th>
                                <th ><input v-on:keyup.enter='getList()' style="width:96%" type="text" v-model="search.created_at" />
                                    </th>

                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeA" v-for="item in list">
                                <td>{{item.id}}</td>
                                <td>{{item.vin}}</td>
                                <td>{{item.ip}}</td>
                                <td>{{item.country}}</td>
                                <td>{{item.province}}</td>
                                <td>{{item.city}}</td>
                                <td>{{item.created_at}}</td>
                            </tr>

                            </tbody>
                            <tfoot>
                            <tr>
                                <th>ID</th>
                                <th>VIN</th>
                                <th>IP</th>
                                <th>国家</th>
                                <th>省份</th>
                                <th>市(县)</th>
                                <th >时间</th>
                            </tr>
                            </tfoot>
                        </table>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="dataTables_info" id="DataTables_Table_0_info" role="alert"
                                     aria-live="polite" aria-relevant="all">共 {{total}} 项</div>
                            </div>
                            <div class="col-sm-6">
                                <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
                                    <ul class="pagination">
                                        <li class="paginate_button previous" aria-controls="DataTables_Table_0" tabindex="0"
                                            id="DataTables_Table_0_previous">
                                            <a v-on:click="getList({page:search.page - 1})">上一页</a>
                                        </li>

                                        <li v-for="item in pages" class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0">
                                            <a v-on:click="getList({page:item})">{{item}}</a>
                                        </li>
                                        <li class="paginate_button next disabled" aria-controls="DataTables_Table_0"
                                            tabindex="0" id="DataTables_Table_0_next">
                                            <a v-on:click="getList({page:search.page + 1})">下一页</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import config from '../config'
    export default{
        name : 'vin',
        data () {
            return {
                msg: '',
                list:[],
                page_total : 0,
                total : 0,
                pages : [],
                search:{
                    'page': 1,
                    'vin':'',
                    'ip':'',
                    'country':'',
                    'province':'',
                    'city':'',
                },
                getList : function( params ){
                    this.search = $.extend( this.search, params );
                    this.search.page = this.search.page < 1 ? 1 : this.search.page;
                    this.search.page = this.search.page > this.page_total ? this.page_total : this.search.page;

                    var api_token = localStorage.getItem('api_token');
                    var url = config.api_url + '/backend/vin/log/list' + '?api_token=' + api_token;
                    var t = this;
                    $.ajax({
                        type: "get",
                        url: url,
                        dataType: 'json',
                        data: t.search,
                        xhrFields:true,
                        success:function( json ){
                            t.list = [];
                            if( json.status == undefined || json.status == 0 ){
                                for(var i =0;i < json.list.length; i ++){
                                    t.list.push( json.list[i]);
                                }
                                t.page_total=json.page_total;
                                t.total=json.total;
                                t.pages = [];
                                for( var i = 1;i <= t.page_total; i ++ ){
                                    if( i <= 3 || i>= t.page_total-2 || ( i< t.search.page + 2 && i > t.search.page - 2 ) ){
                                        if( i - t.pages[t.pages.length - 1] > 1 ){
                                            t.pages.push( '...' );
                                        }
                                        t.pages.push( i );
                                    }
                                }
                            }else{
                                alert( json.description );
                                if( json.status == 2 ){
                                    location.href = '/login.html';
                                }
                            }

                        }
                    });
                }
            }
        }
        ,created: function(){

            this.getList();
        }

    }
</script>

